<template>
  <div class="content">
        <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <!--header 拼单商品详情-->
    <div class="goods">
      <div class="goods-img">
        <mt-swipe :auto="0">
          <mt-swipe-item v-for="(item,index) in mallImgList" :key="index"><img :src=item alt=""></mt-swipe-item>
        </mt-swipe>
        <!--<div class="fenye">1/5</div>-->
      </div>
      <div class="goods-price">
        <div class="top">
          <span class="price">&yen{{goodsInfo.salePrice/100}}</span>
        </div>
        <div class="middle">
          <span class="left">京东价: <span>{{goodsInfo.jdPrice/100}}</span></span>
          <span class="right">订单剩余: <span>{{this.goodsNum}}</span></span>
        </div>
        <div class="goods-title">
         <span>
           {{goodsInfo.mallName}}
         </span>
          <p class="mallLabel">
            {{goodsInfo.mallLabel}}
          </p>
        </div>
      </div>
    </div>
    <div class="shop">
      <div class="shop">
        <div class="shop-img">
          <img :src='goodsInfo.detailsImg' alt="">
        </div>
        <div class="shop-name">
          <p class="name">{{goodsInfo.mallTypeName}}</p>
          <p class="gys">供应商</p>
        </div>
        <div class="all" @click="toShops">
          店铺商品
        </div>
      </div>
    </div>
    <div class="text">
      <ul>
        <li><img src="./ico@1x.png" alt="">包邮代发</li>
        <li><img src="./ico@1x.png" alt="">48小时发货</li>
        <li><img src="./ico@1x.png" alt="">无条件退换</li>
        <li><img src="./ico@1x.png" alt="">正品保障</li>
      </ul>
    </div>
    <div class="goods-detail">
      <div class="detail-title">
        商品详情
      </div>
      <div class="detail-img">
        <div v-for="img in mallDetailList">
          <img v-lazy='img' alt="">
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="home" @click="toHome">
        <div>
          <img src="./ico_home@1x.png" alt="">
        </div>
        <span>首页</span>
      </div>
      <router-link to="/Messages">
        <div class="serve">
          <div>
            <img src="./ico_kf@1x.png" alt="">
          </div><span>客服</span>
        </div>
      </router-link>
      <div class="go" @click="show">
        <p>立刻参团</p>
        <p class="countDown" v-if="showTime">
          <Countdown :gpEndTime="Date.parse(new Date(timeEnd)).toString()" endText="已经结束了" ref="cd"></Countdown>
        </p>
        <p class="countDown" v-else>此拼单商品人数已满</p>
      </div>
    </div>
    <!-- 规格选择-->
    <div class="choose" v-show="isShow">
      <div class="bg">
        <div class="shop-goods">
          <div class="goods-img">
            <img :src="goodsInfo.mallImg" alt="">
          </div>
          <div class="price">
            <p>&yen{{goodsInfo.salePrice/100}} <b>京东价：{{goodsInfo.jdPrice/100}}</b></p>
            <p>请选择规格和数量</p>
          </div>
          <img @click="close" class="close" src="./ico_guanbi@1x.png" alt="">
        </div>
        <div class="guige">
          <div class="gg-title">规格</div>
          <ul>
            <li class="select">
              {{goodsInfo.specificationsName}}
            </li>
          </ul>
        </div>
        <div class="num">
          <p>数量</p>
          <div class="numbers">
            <img class="sub" src="./_@1x.png" alt="" @click="sub">
            <div class="number" v-model="isNum">{{isNum}}</div>
            <img class="add" src="./+@1x.png" alt="" @click="add">
          </div>
        </div>
      </div>

    </div>
    <loading v-show="showLoading"></loading>
  </div>
</template>
<script>
  import Countdown from '../../components/Countdown'
  import { Toast } from 'mint-ui'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  import {msg_10053} from '../../message/msg_10053'
  import {relogin} from "../../components/httpUtil/httpUtil";
  export default {
    name: '',
    data () {
      return {
        title: '商品详情页',
        isShow: false,
        isNum: 1,
        goodsInfo: {},
        timeEnd: 0,
        showTime: true,
        mallImgList:[],
        mallDetailList:[],
        goodsNum:null,
        showLoading: true, //显示加载动画
        showAlert :false,
        alertText: null,
        wxlist:{},
        type:''
      }
    },
    components: {
      Countdown
    },
    methods: {
        toHome(){
            console.log(JSON.parse(window.localStorage.data).type)
        if (JSON.parse(window.localStorage.data).type === 0) {
          this.$router.push({name: 'mall', query: {
            shopId: window.localStorage.shopId,
            shopType: 1
          }})
        } else if (JSON.parse(window.localStorage.data).type === 1) {
          this.$router.push('/disTrueHome')
        }
      },
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      toShops(){
        if (JSON.parse(window.localStorage.data).type === 0) {
          this.$router.push({name: 'homeAllSort', params: {}})
        } else if (JSON.parse(window.localStorage.data).type === 1) {
          this.$router.push('/Shops')
        }
      },
      close(){
        this.isShow = !this.isShow
      },
      show(){
        if (new Date(this.timeEnd).getTime() - new Date().getTime() > 0 && this.showTime==true) {
          if (this.isShow) {
            if (this.isNum != 0) {
//            window.localStorage.isNum = this.isNum;
              let pingoodsInfo = {
                userId: JSON.parse(window.localStorage.data).id,
                msId: JSON.parse(window.localStorage.msId),
                gpId:JSON.parse(window.localStorage.gpId),
                mallId: window.localStorage.mallId,
                isNum: this.isNum,
                specName:this.goodsInfo.specificationsName,
//              spec:this.spec,
                price:this.goodsInfo.salePrice,
                mallImg:this.goodsInfo.mallImg,
                mallName:this.goodsInfo.mallName,
                comRatio:this.goodsInfo.commissionRatio,
              }
              localStorage.setItem('goodsInfo1021', JSON.stringify(pingoodsInfo))
              this.$router.push(
                {
                  name: 'Exchange',
                  params: {}
                })
            } else {
              alert('数量不能为0')
            }
          } else {
            this.isShow = !this.isShow
          }
        } else if (this.showTime==false) {
          this.alertTip('此拼单商品人数已满');
          this.go = function(){
            this.showAlert = false;
          }
        }
        else {
          this.alertTip('拼团商品已过期');
          this.go = function(){
             this.showAlert = false;
          }

        }

      },
      sub: function () {
        this.isNum--;
        if (this.isNum <= 0) {
          this.alertTip("数值不可以小于0");
          this.go = function(){
             this.showAlert = false;
          }
          this.isNum = 0;
        }
      },
      add: function () {
        this.isNum++;
        if(this.isNum>this.goodsNum){
          this.alertTip("数值大于商品数量");
          this.go = function(){
            this.showAlert = false;
            this.isNum = this.goodsNum
          }
        }

      },

      // 微信菜单设置
      fun_wxConfig () {

        const shopId = window.localStorage.shopId;
        const msId = window.localStorage.msId;
        const gpId = window.localStorage.gpId;

        msg_10046.send(this,msg_10046.entity(),function(varThis,res){

              varThis.wxlist=res.data.p.sign
              wx_config(varThis.wxlist);

              let l_malltitle=varThis.goodsInfo.mallName
              /*  alert(window.location.href)*/
              let l_ptShopUrl= get_ptShopQrcode(shopId,msId,gpId)
              let l_mallimg=varThis.goodsInfo.mallImg
              console.log('shopUrl:'+l_ptShopUrl)

              wx_share(varThis.goodsInfo.specificationsName,l_ptShopUrl,l_mallimg,'价格:'+varThis.goodsInfo.salePrice/100);
        })
      },
      //拼单商品 订单详情
      fn10052 () {
        // let pingoodsInfo = JSON.parse(localStorage.getItem('pingoodsInfo1021'));
        let jsonValue = JSON.stringify({
          "c": "10052",
          "p": {
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "msId": parseInt(http_getParam('msId'))||JSON.parse(window.localStorage.msId), // 拼团ID
            "tokenId": token(),
            "gpId":window.localStorage.gpId
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue, true).then((res) => {
          console.log(res);
          const data = res.data.p;
          if(data.isTrue){
            this.hideLoading();
            this.goodsInfo = data.mall;
            window.localStorage.mallId=data.mall.mallId
            this.goodsNum =data.groupPurchase.goodsNum || 0
            if (this.goodsNum<=0) {
              this.showTime = false;
            }
            console.log(data.mall)
            this.mallImgList = data.mall.mallImg.split('#');
            this.mallImgList.pop();
            this.mallDetailList = data.mall.detailsImg.split('#');
            this.mallDetailList.pop();
            this.timeEnd = data.groupPurchase.timeEnd
            console.log(this.timeEnd)
            this.$refs.cd.countdown(Date.parse(new Date(this.timeEnd)).toString());
            const malltitle=this.goodsInfo.mallName
            const mallurl=window.location.href
            const mallimg=this.goodsInfo.mallImg
            const mallrice=this.goodsInfo.salePrice / 100
            wx_share(malltitle,mallurl,mallimg,'价格:' +mallrice)
            this.fun_wxConfig()
          } else {
            this.hideLoading();
            this.alertTip(data.errorMsg);
            if (data.errorCode === 90) {
              this.go= ()=> {
                this.showAlert = false
                let _this = this
                relogin(_this)
              }
            }
          }
        }, (res) => {
          this.hideLoading();
          this.alertTip('网络错误');
          this.go = function(){
             this.showAlert = false;
          }
        })
      }
//      fn10011(){
//        let pingoodsInfo = JSON.parse(localStorage.getItem('pingoodsInfo1021'))
//        let jsonValue = JSON.stringify({
//          "c": "10011",
//          "p": {
//            "userId": JSON.parse(window.localStorage.data).id, //用户ID
//            "GPurchaseId": JSON.parse(window.localStorage.gpId), // 拼团ID
//            "tokenId": token()
//          }
//        });
//        this.$http.post(api + '/qqs.us', jsonValue, true).then((res) => {
//          console.log(res)
////          if(res.data.p.isTrue){
//          //商品id
//          let mallId = res.data.p.goodsInfo.id;
//          //规格 数组
//          this.specList = res.data.p.goodsSpec[mallId];
//          //规格1
//          this.mallSpec = this.specList[0];
//          this.spec = this.mallSpec.id
//          //价格
//          //this.mallPrice = this.specNo1.salePrice/100
//          this.price = this.mallSpec.salePrice / 100;
//          this.tpPrice = this.mallSpec.tpPrice / 10;
//          //库存
//          //this.mallStock = this.specNo1.stock
//          //商品信息
//          let goodsInfo = res.data.p.goodsInfo;
//          this.goodsInfo = goodsInfo;
////          }
//        })
//      },
    },
   /* created(){  wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
      if (varRet == -1) {
        varThis.alertTip('网络错误');
        varThis.go = function () {
          varThis.showAlert = false;
        }

      }
      // 关注钱应该判断下是否已经关注过了
      msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
        varThis.wxlist=res.data.p.sign
        varThis.hideLoading();
        wx_config(varThis.wxlist);
        varThis.hideLoading();
        wx_hideAllMenu();
        wx.hideMenuItems({
          //禁用单独分享朋友圈QQ空间等功能
          menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
        });
      })


    },this.type)},*/
    mounted(){
      // 做判断，防止刷新页面，用户身份type值发生改变，影响首页跳转
//      console.log(JSON.parse(window.localStorage.data).type)
      if(window.localStorage.data && JSON.parse(window.localStorage.data).type==1){
        this.type='1';
      }else{
        this.type='0';
      }
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        const shopId = parseInt(http_getParam('shopId'));
        const msId = parseInt(http_getParam('msId'));
        const gpId = parseInt(http_getParam('gpId'));
        console.log(shopId);
        console.log(msId);
        console.log(gpId);
        window.localStorage.shopId = shopId;
        window.localStorage.msId = msId;
        window.localStorage.gpId = gpId;

        // 获取拼单商品详情的数据
        varThis.fn10052();
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.hideLoading();
          wx_hideAllMenu();
         /* const malltitle=varThis.goodsInfo.mallName
          const mallurl=window.location.href
          const mallimg=varThis.goodsInfo.mallImg
          wx_share(malltitle,mallurl,mallimg)*/
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })
        // 关注钱应该判断下是否已经关注过了
        msg_10053.send(varThis,msg_10053.entity(),function(varThis,res){

        })
        document.documentElement.scrollTop=0;


      },this.type)


    },
  /*  updated(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        const malltitle=this.goodsInfo.mallName
        const mallurl=window.location.href
        const mallimg=this.goodsInfo.mallImg
        const mallrice=this.goodsInfo.salePrice / 100
        wx_share(malltitle,mallurl,mallimg,mallrice)
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.hideLoading();
        })
        wx.hideMenuItems({
          //禁用单独分享朋友圈QQ空间等功能
          menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
        });
        //启用分享功能按钮
      })


    },*/


//         })
    // },
  }
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    .goods {
      margin-bottom: 20px;
      width: 100%;
      height: 910px;
      .goods-img {
        overflow: hidden;
        height: 640px;
        width: 100%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .fenye {
          text-align: center;
          width: 62px;
          height: 33px;
          line-height: 33px;
          position: absolute;
          bottom: 33px;
          right: 30px;
          background: url('./bg@1x.png') no-repeat;
          background-size: 100%;
        }
      }
      .goods-price {
        box-sizing: border-box;
        width: 100%;
        background: #ffffff;
        padding: 30px 30px 32px 30px;
        .top {
          .price {
            font-size: 42px;
            color: #fe3519;
            padding-right: 28px;
          }
        }
        .middle {
          padding: 24px 0;
          font-size: 24px;
          height: 24px;
          color: #a1a1a1;
          position: relative;
          .right {
            position: absolute;
            right: 0px;
          }
        }
        .goods-title {
          color: #3b3b43;
          font-size: 28px;
          line-height: 40px;
          font-weight: 800;
          .mallLabel {
            font-size: 24px;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

      }
    }
    .shop {
      border-bottom: 1px solid #f4f4f4;
      background: #ffffff;
      height: 140px;
      width: 100%;
      position: relative;
      .shop-img {
        width: 73px;
        height: 73px;
        position: absolute;
        top: 24px;
        left: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .shop-name {
        position: absolute;
        top: 34px;
        left: 121px;

        .name {
          font-size: 24px;
          color: #3b3b43;
          margin-bottom: 14px;
        }
        .gys {
          font-size: 20px;
          color: #818790;
        }

      }
      .all {
        font-size: 20px;
        width: 136px;
        height: 56px;
        border: 1px solid #818790;
        border-radius: 10px;
        line-height: 56px;
        position: absolute;
        right: 34px;
        top: 34px;
        text-align: center;
        color: #818790;
      }
    }
    .text {
      height: 60px;
      background: #ffffff;
      margin-bottom: 20px;
      > ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        > li {
          font-size: 20px;
          color: #3b3b43;
          line-height: 60px;
          > img {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .goods-detail {
      width: 100%;
      position: relative;
      background: #ffffff;
      margin-bottom: 98px;
      .detail-title {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size: 24px;
        color: #3b3b43;
        padding-left: 30px;
      }
      .detail-img {
        display: inline-block;
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    .footer {
      height: 98px;
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      flex-flow: row nowrap;
      text-align: center;
      background: #ffffff;
      .home{
        flex:1;
        padding: 15px 34px 15px 31px;
        font-size:20px ;
        color:#818790 ;
        img{
          width: 39px;
          height: 39px;
        }
      }
      .serve{
        flex:1;
        font-size:20px ;
        padding: 15px 30px 15px 34px;
        color:#818790 ;
        img{
          width: 46px;
          height: 38px;
        }
      }
      .go {
        flex: 8;
        height: 98px;
        //line-height: 28px;
        width: 189px;
        background: url('./btn_fqpd@1x.png');
        background-size: 100% 100%;
        font-size: 28px;
        color: #ffffff;
        padding-top: 20px;
        .countDown {
          font-size: 20px;
        }
      }
    }
    .choose {
      background: rgba(0, 0, 0, 0.5);
      height: 100%;
      width: 100%;
      position: fixed;
      bottom: 98px;
      z-index: 2;
      .bg {
        background: #ffffff;
        height: 665px;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 9;
        .shop-goods {
          padding-left: 30px;
          height: 186px;
          position: relative;
          .goods-img {
            margin-top: 38px;
            margin-right: 28px;
            float: left;
            width: 146px;
            height: 146px;
            background: #0099ff;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .price {
            padding-top: 100px;
            p:nth-child(1) {
              font-size: 32px;
              color: #fe3159;
              b {
                margin-left: 24px;
                font-size: 24px;
                color: #a1a1a1;
                font-weight: 400;
              }
            }
            p:nth-child(2) {
              font-size: 24px;
              color: #3b3b43;
            }
          }
          .close {
            position: absolute;
            top: 38px;
            right: 30px;
            width: 30px;
            height: 25px;
          }
        }
        .guige {
          padding-left: 30px;
          padding-right: 30px;
          margin-top: 40px;
          .gg-title {
            font-size: 24px;
            color: #3b3b43;
            margin-bottom: 15px;
          }
          ul {
            display: flex;
            flex-flow: row wrap;
            /*justify-content: space-between;*/
            text-align: center;
            line-height: 60px;
            .select {
              color: #fe3519;
              border-color: #fe3519;
            }
            li {
              /*flex: 0 0 30%;*/
              height: 60px;
              /*width: 128px;*/
              margin: 15px 30px;
              border: 1px solid #818790;
              border-radius: 5px;
            }
          }

        }
        .num {
          height: 110px;
          padding-left: 34px;
          padding-right: 19px;
          p {
            font-size: 24px;
            color: #3b3b43;
            margin-bottom: 29px;
          }
          .numbers {
            margin-top: 25px;
            display: flex;
            line-height: 112px;
            flex-flow: row nowrap;
            justify-content: flex-start;
            img {
              width: 68px;
              height: 62px;
            }
            .number {
              width: 160px;
              height: 60px;
              font-size: 20px;
              border: 1px solid #a1a1a1;
              /*background: url("./btn@1x.png") no-repeat;*/
              /*background-size: 100%;*/
              text-align: center;
              line-height: 62px;
            }
          }
        }

      }

    }
  }
</style>
